<template>
  <div>
    <!-- 选择学院 -->
    <el-select v-model="dep" placeholder="请选择学院">
      <el-option
        v-for="item in dep_list"
        :key="item.id"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <!-- 选择学院下阶段 -->
    <el-select
      v-model="stage"
      clearable
      :disabled="zt"
      placeholder="请选择阶段"
    >
      <el-option
        v-for="item in stage_list"
        :key="item.id"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <!-- 选择学生/家长 -->
    <el-select v-model="stu_par" :disabled="zt" placeholder="请选择">
      <el-option
        v-for="item in stu_par_list"
        :key="item.name"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <!-- 第一周第二周第三周 -->
    <el-select
      v-model="what_week"
      clearable
      :disabled="zt"
      placeholder="请选择周数进行查看"
    >
      <el-option
        v-for="item in what_week_list"
        :key="item.name"
        :label="item.name"
        :value="item.name"
      >
      </el-option>
    </el-select>
    <div
      class="echart"
      id="mychart"
      :style="{ float: 'left', width: '100%', height: '400px' }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {xueyuanbi} from "network/api/voice"
import {getAllDepartment} from "network/api/department"
import {getCollegeStageByCollegeId} from 'network/api/college_stage'
export default {
  props: {},
  data() {
    return {
      dep_list: [],
      stage_list: [],
      stu_par_list: [
        {
          name: "学生",
        },
        {
          name: "家长",
        },
      ],
      what_week_list: [
        { name: "第一周" },
        { name: "第二周" },
        { name: "第三周" },
      ],
      dep: "",
      stage: "",
      stu_par: "学生",
      what_week: "",
      zt: true,
      have_ring: 0,
      yet_ring: 0,
      state: 1,
    };
  },
  computed: {},
  created() {
    // 获取所有学院
    getAllDepartment().then((msg) => {
      let xueyuanall = []
      msg.forEach(item=>{
        if (item.label==1){
          xueyuanall.push(item)
        }
      })
      this.dep_list = xueyuanall;
    });
  },
  mounted() {
    this.initEcharts();
  },
  watch: {
    dep: function () {
      //把选择阶段的禁用解除
      this.zt = false;
      //执行函数，获取图表数据
      this.get_chart_data();
      //通过学院文字去获取学院id
      getAllDepartment().then((msg) => {
        msg.forEach((item) => {
          if (this.dep == item.name) {
            //拿学院id去获取学院下所有阶段
            getCollegeStageByCollegeId(item.id).then((msg) => {
              this.stage_list = msg.data;
            });
          }
        });
      });
    },
    // 监听阶段选择
    stage: function () {
      if (this.stage == "") {
        this.state = 1;
      } else {
        this.state = 2;
      }
      this.get_chart_data();
    },
    //监听老师/学生 下拉框
    stu_par: function () {
      this.get_chart_data();
    },
    // 监听周数
    what_week: function () {
      this.get_chart_data();
    },
  },
  methods: {
    // 通过学院名称去获取图表数据
    get_chart_data() {
      xueyuanbi(this.dep,this.state).then((msg) => {
                console.log(msg,123);
        this.have_ring = msg.data.stu_all;
        this.yet_ring = msg.data.data.dep_count-msg.data.data.stu_all
        // 如果下拉框为学生，显示当前学院的已沟通学生人数
        if (this.stu_par == "学生") {
          this.yet_ring = msg.data.dep_count - msg.data.stu_all;
        }
        // 同上
        if (this.stu_par == "家长") {
          this.yet_ring = msg.data.dep_count - msg.data.par_all;
        }
        // 如果要查学院下   第一周的与学生通话数量
        if ((this.what_week == "第一周") & (this.stu_par == "学生")) {
          this.have_ring = msg.data.first_week_stu;
          this.yet_ring =
            msg.data.dep_count - msg.data.first_week_stu;
        }
        if ((this.what_week == "第二周") & (this.stu_par == "学生")) {
          this.have_ring = msg.data.second_week_stu;
          this.yet_ring =
            msg.data.dep_count - msg.data.second_week_stu;
        }
        if ((this.what_week == "第三周") & (this.stu_par == "学生")) {
          this.have_ring = msg.data.third_week_stu;
          this.yet_ring =
            msg.data.dep_count - msg.data.third_week_stu;
        }
        // 如果要查学院下   第一周的与家长通话数量
        if ((this.what_week == "第一周") & (this.stu_par == "家长")) {
          this.have_ring = msg.data.first_week_par;
          this.yet_ring =
            msg.data.dep_count - msg.data.first_week_par;
        }
        if ((this.what_week == "第二周") & (this.stu_par == "家长")) {
          this.have_ring = msg.data.second_week_par;
          this.yet_ring =
            msg.data.dep_count - msg.data.second_week_par;
        }
        if ((this.what_week == "第三周") & (this.stu_par == "家长")) {
          this.have_ring = msg.data.third_week_par;
          this.yet_ring =
            msg.data.dep_count - msg.data.third_week_par;
        }
        console.log(this.have_ring);
        console.log(this.yet_ring);
        // 画图表前，判断是否有数据，如果没有，做提示
        if ((this.have_ring == 0) & (this.yet_ring == 0)) {
          this.$message({
            message: "注意，没有检测到有效数据",
            type: "warning",
          });
        }
        this.initEcharts();
      });
      
    },
    // 绘制图表
    initEcharts() {
      const option = {
        title: {
          text:
            this.dep +
            "  " +
            this.stage +
            "  " +
            "  " +
           '与'+ this.stu_par +
            this.what_week +
            "通话进度一览",
          subtext: "未通话/已通话",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.have_ring, name: "已通话" },
              { value: this.yet_ring, name: "未通话" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart")); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  components: {},
};
</script>

<style>
</style>